<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    /* 单行的溢出显示省略号 */
    .box {
      width: 200px;
      height: 100px;
      background-color: red;
      white-space: nowrap; /*禁止换行*/
      overflow: hidden; /*溢出部分隐藏*/
      text-overflow: ellipsis; /*文本溢出部分显示省略号*/
    }
    /* 多行隐藏 -- 老版本自适应布局 */
    /* 缺点：如果没有固定行数显示，实现出的效果，只能是固定行数显示省略号 */
    /* 适用场景：展示行数固定，高度固定 */
    .box2 {
      height: 100px;
      width: 200px;
      background-color: yellowgreen;
      display: -webkit-box; /*自适应布局——-webkit-box布局*/
      overflow: hidden; /*溢出隐藏*/
      -webkit-box-orient: vertical; /*在父元素设置子元素的排列式——垂直*/
      -webkit-line-clamp: 3; /*显示文本的行数——2行，可根据需要修改*/
      text-overflow: ellipsis; 
    }

    /*第二方式，，多行省略--参考借鉴网络积累*/
    /* 利用伪元素遮挡最后一个字符实现效果 */
    /* 适应用比较零活的展示溢出。 */
    .box3{
      height: 100px;
      width: 200px;
      background-color: blueviolet;
      overflow: hidden;
      line-height: 20px;
      position: relative;
    }
    .box3::after{
      content: "...";
      width: 1em;
      background-color: blueviolet;
      position: absolute;
      right: 0;
      bottom: 0;
    }
  </style>
  <body>
    <div class="box">
      关关雎鸠，在河之洲。 窈窕淑女，君子好逑。 参差荇菜，左右流之。
      窈窕淑女，寤寐求之。 求之不得，寤寐思服。 悠哉悠哉，辗转反侧。
      参差荇菜，左右采之。 窈窕淑女，琴瑟友之。 参差荇菜，左右芼之。
      窈窕淑女，钟鼓乐之。
    </div>
    <div class="box2">
      关关雎鸠，在河之洲。 窈窕淑女，君子好逑。 参差荇菜，左右流之。
      窈窕淑女，寤寐求之。 求之不得，寤寐思服。 悠哉悠哉，辗转反侧。
      参差荇菜，左右采之。 窈窕淑女，琴瑟友之。 参差荇菜，左右芼之。
      窈窕淑女，钟鼓乐之。
    </div>

    <div class="box3">
      关关雎鸠，在河之洲。 窈窕淑女，君子好逑。 参差荇菜，左右流之。
      窈窕淑女，寤寐求之。 求之不得，寤寐思服。 悠哉悠哉，辗转反侧。
      参差荇菜，左右采之。 窈窕淑女，琴瑟友之。 参差荇菜，左右芼之。
      窈窕淑女，钟鼓乐之。
    </div>
  </body>
</html>
